<template>
	<view class="pb-safe-area">
		<view class="flex flex-column grid-gap-4">
			<view class="bg-white p-4 rounded-4 flex flex-column grid-gap-4">
				<view class="flex grid-gap-4 border-bottom pb-4">
					<image :src="info.technician_headimg" mode="" class="rounded-circle" style="width: 20px;height: 20px;">
					</image>
					<text class="flex-1 font-weight-600 h8">{{ info.technician_nickname }}</text>
					<x-rate :count="5" v-model="form.grade"></x-rate>
				</view>
				<textarea placeholder="您对服务项目的评价内容" placeholder-class="text-placeholder"
					class="w-100 min-vh-10" auto-height v-model="form.content"></textarea>
				<x-uploads v-model="form.images" :limit="9" fill :margins="36"></x-uploads>
				<text class="h10 text-placeholder">上传图片为其他用户提供参考吧</text>
			</view>
			<view class="bg-white p-4 rounded-4 flex flex-column grid-gap-6">
				<text class="h9 font-weight-500 text-grey">您对服务项目的评价</text>
				<view class="flex flex-column grid-gap-4" v-for="(item, index) in form.projects" :key="index"
					v-if="info.projects">
					<view class="flex grid-gap-2 py-2 border-bottom pb-4">
						<image :src="item.thumb" mode="" class="rounded-2" style="width: 20px;height: 20px;"></image>
						<text class="flex-1 font-weight-600 h8">{{ item.title }}</text>
						<x-rate :count="5" v-model="item.grade"></x-rate>
					</view>
					<textarea :placeholder="`您对${item.title}服务的评价内容`" placeholder-class="text-placeholder"
						class="w-100 min-vh-10" auto-height v-model="item.content"></textarea>
					<x-uploads v-model="item.images" :limit="9" fill :margins="36"></x-uploads>
					<text class="h10 text-placeholder">上传图片为其他用户提供参考吧</text>
				</view>
			</view>
			<view class="bg-white p-4 rounded-4 flex flex-column grid-gap-4" v-if="info.shop_id">
				<text class="h9 font-weight-500 text-grey">您对该门店的评价</text>
				<view class="flex flex-column grid-gap-4">
					<view class="flex grid-gap-2 py-2 border-bottom pb-4">
						<image :src="info.shop_logo" mode="" class="rounded-2" style="width: 20px;height: 20px;"></image>
						<text class="flex-1 font-weight-600 h8">{{ info.shop_title }}</text>
						<x-rate :count="5" v-model="form.shop_grade"></x-rate>
					</view>
					<textarea :placeholder="`您对${info.shop_title}门店的评价内容`" placeholder-class="text-placeholder"
						class="w-100 min-vh-10" auto-height v-model="form.shop_content"></textarea>
					<x-uploads v-model="form.shop_images" :limit="9" fill :margins="36"></x-uploads>
					<text class="h10 text-placeholder">上传图片为其他用户提供参考吧</text>
				</view>
			</view>
			<view class="p-4 flex flex-column grid-gap-4">
				<view class="flex flex-y-center grid-gap-2" @tap="form.anony === 1 ? form.anony = 0 : form.anony = 1;">
					<switch :checked="form.anony === 1" color="var(--xl-primary-light-1)" style="transform:scale(0.7)" />
					<text class="text-placeholder">匿名提交</text>
				</view>
				<button class="btn-primary btn-round w-100" size="small" @tap="submit()">确认提交</button>
			</view>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { $page, $api, $message } from '@/utils';
import { onLoad } from '@dcloudio/uni-app';
import { $EventName } from '@/utils/const/env';
const loading = ref(false);
const form = reactive({
	trade: '',
	anony: 0,
	grade: 5,
	content: '',
	images: [],
	shop_grade: 5,
	shop_content: '',
	shop_images: [],
	projects: []
});
const info = ref({});
const getOrderInfo = (trade: any) => {
	loading.value = true;
	$api.Orders.info(trade).then((data: any) => {
		info.value = data;
		form.trade = data.trade;
		for (let i = 0; i < data.projects.length; i++) {
			const project = data.projects[i];
			form.projects.push({
				service_id: project.service_id,
				thumb: project.thumb,
				title: project.title,
				duration: project.duration,
				grade: 5,
				content: '',
				images: []
			})
		}
	}).catch((err: any) => {
		uni.showModal({
			title: '提示',
			content: err.msg,
			showCancel: false,
			success: () => {
				$page.back();
			}
		})
	}).finally(() => {
		loading.value = false
	})
}
const submit = () => {
	loading.value = true;
	$api.Comment.create(form).then((res:any) => {
		$message.success(res.msg);
		uni.$emit($EventName.UPDATE_ORDER);
		setTimeout(() => {
			$page.back();
		}, 300)
	}).catch((err: any) => {
		$message.error(err.msg)
	}).finally(() => {
		loading.value = false
	})
}
onLoad((options: any) => {
	getOrderInfo(options.trade)
})
</script>

<style lang="scss" scoped></style>
